<%--
    @Description： 看板维护
    @Author： 樊双峰
    @Date： 2018-07-04 23:49
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>设备看板维护</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <script type="text/javascript" src="${request.getContextPath()}/js/jTopo/jtopo-0.4.8-min.js"></script>
    <script type="text/javascript" src="${request.getContextPath()}/js/jquery/jquery-1.7.2.js"></script>
    <style type="text/css">
    html,body {
        margin: 0px;
        padding: 0px;
    }

    /* body START */
    .content {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-size: 100% 100%;
    }
    /* body END */

    /* 标题 START */
    .title {
        width: 100%;
        height: 50px;
        background: #2b353b;
    }

    .titleState {
        width: 75%;
        height: 50px;
        float: left;
    }

    .titleText {
        width: 25%;
        height: 50px;
        float: right;
        font-size: 25px;
        color: #ffffff;
        font-weight: 700;
        text-align: center;
        margin-top: 8px;
        font-family: '微软雅黑', '宋体';
    }

    .titleState ul {
        width: 100%;
        height: 30px;
        list-style: none;
        margin: 10px 20px;
        padding: 0px;
    }

    .titleState ul li {
        margin: 0px auto;
        display: inline-block;
        line-height: 30px;
        text-align: center;
        margin: 0px 10px;
        padding: 0px 0px;
    }
    /* 标题 END */

    /* 画布 START */
    .myCanvas {
        background: #3d4b54;
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 50px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    /* 画布 END */

    /* 设备移除 START */
    .contextmenu {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #ffffff none repeat scroll 0 0;
        border: 1px solid #CCCCCC;
        box-shadow: 0px 0px 15px #000;
        border-radius: 5px;
        display: none;
        list-style: outside none none;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 1;
    }

    .contextmenu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        padding: 10px;
        border-bottom: 1px solid #aaa;
        cursor: pointer;
        text-align: center;
        background: #1488F5;
        opacity: 0.8;
        font-size: 20px;
    }

    .contextmenu li a:hover {
        opacity: 1;
    }
    /* 设备移除 END */

    em {
        font-style: normal;
        font-weight: 700;
    }

    p {
        font-size: 15px;
    }
    </style>
</head>

<body>
<!-- 整个body显示页面 START -->
<div class="content">
    <!-- 标题 START -->
    <div class="title">
        <div class="titleText" title="设备看板">EQUIPMENT BOARD</div>
        <div class="titleState" title="设备状态">
            <ul>
                <g:each in="${getStateColor}" status="i" var="stateColorInstance">
                    <li style="background-color: rgb(${stateColorInstance.COLOR}); font-family: '微软雅黑', '宋体'; border-radius: 4px; box-shadow: 0 0 15px #fff;">&nbsp;${stateColorInstance.STATE}&nbsp;</li>
                </g:each>
            </ul>
        </div>
    </div>
    <!-- 标题 END -->
    <!-- 画布 START -->
    <div class="myCanvas" id="myCanvas">
        <canvas id="canvas" width="1360" height="700" style="width: 100%; height: 100%; display: inline-block"></canvas>
    </div>
    <!-- 画布 END -->
</div>
<!-- 整个body显示页面 END -->
<!-- 事件框 START -->
<div>
    <ul class="contextmenu" style="display:none;position: absolute;">
        <li id="actualPower"></li>
        <li><a href="javascript:void(0)">remove</a></li>
    </ul>
    <ul id="menu" style="display:none;">
        <li><a>remove</a></li>
        <li><a>enlarge</a></li>
        <li><a>narrow</a></li>
    </ul>
</div>
<!-- 事件框 END -->
</body>
</html>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    window.addEventListener("resize", resizeCanvas, false);
    function resizeCanvas() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
    }

    /* addNode */
    var currentNode = null;
//    var tempcanvas = "<canvas id='canvas-drag' width='1363' height='700'>" + "</canvas>";/* width='1363' height='700' */

    /**
     * 获取设备
     */
    function getEqpInfo() {
//        $("#board").after(tempcanvas);
        var canvas = document.getElementById("canvas");
        var stage = new JTopo.Stage(canvas);
        var scene = new JTopo.Scene(stage);
        scene.alpha = "3";
        scene.setBackground('${request.getContextPath()}/images/bg.jpg');
//        stage.click(function (event) {
//            if (event.button == 0) {// 右键
//                $("#menu").hide();
//            }
//        });
        $.ajax({
            type: 'GET',
            url: '${request.getContextPath()}/EqpBoard/getEqpInfo.json',
            dataType: 'json',
            async: true,
            success: function (rst) {
                $.each(rst, function (index, item) {
                    var node = new JTopo.Node(index);
                    node.setLocation(item.X, item.Y);
                    node.dragable = true;
                    node.setSize(item.WIDTH, item.HEIGHT);
                    node.fillColor = item.COLOR;
                    node.text = '微软雅黑';
                    node.font = '12px 微软雅黑';
                    node.fontColor = '0,0,0';
                    node.textPosition = 'Middle_Center';
                    node.textOffsetY = -6;
                    node.borderWidth = 2;
                    node.borderColor = '0,0,0';
                    node.text = item.EQP_ID;
                    scene.add(node);

                    /* 放大缩小 START */
                    node.addEventListener('mouseup', function (event) {
                        currentNode = this;
                        handler(event);
                        var nodeId = item.ID;
                        $("#menu li").click(function () {
                            var text = $(this).text();
                            if (text == 'enlarge') {
                                $.ajax({
                                    url: "${request.getContextPath()}/EqpBoard/deformation?id=" + Number(nodeId) + "&act=" + '0',
                                    success: function () {
                                        return;
                                    }
                                });
                                currentNode.scaleX += 0.2;
                                currentNode.scaleY += 0.2;
                            } else if (text == 'narrow') {
                                $.ajax({
                                    url: "${request.getContextPath()}/EqpBoard/deformation?id=" + Number(nodeId) + "&act=" + '1',
                                    success: function () {
                                        return;
                                    }
                                });
                                currentNode.scaleX -= 0.2;
                                currentNode.scaleY -= 0.2;
                            } else if (text == 'remove') {
                                $.ajax({
                                    url: "${request.getContextPath()}/EqpBoard/removeEqp?id=" + Number(nodeId),
                                    success: function () {
                                        return;
                                    }
                                });
                                scene.remove(currentNode);
                                currentNode = null;
                            }
                            $("#menu").hide();
                        });

                    });
                    /* 放大缩小 END */

                    /* 拖拽 START */
                    node.addEventListener('mouseup', function (event) {
                        if (event.button == 0) {
                            $.ajax({
                                url: "${request.getContextPath()}/EqpBoard/changeLocation?id=" + Number(item.ID) + "&x=" + node.x + "&y=" + node.y,
                                success: function () {
                                    return;
                                }
                            });
                        }
                    });
                    /* 拖拽 END */

                    /* 鼠标悬浮事件 START*/
                    node.addEventListener('dbclick', function (event) {
                        var str = "<p><em>设备名：</em>" + "<span style='color: #ff0000;'>" + item.EQP_ID + "</span>" + "</p><p><em>设备描述：</em>" + "<span style='color: #ff0000;'>" + item.DESCRIPTION + "</span>";
                        $("#actualPower").html(str);
                        $("#contextmenu").css({
                            top: event.pageY,
                            left: event.pageX
                        }).show();
                    });
                    /* 鼠标悬浮事件 END*/

                    /* 鼠标移出事件 START*/
                    node.addEventListener('mouseout', function () {
                        $("#contextmenu").hide();
                        $("#menu").hide();
                    });
                    /* 鼠标移出事件 START*/
                });
            }
        });
    }

    function handler(event) {
        if (event.button == 2) {// 右键
            $("#menu").css({
                top: event.pageY,
                left: event.pageX
            }).show();
        }
    }

    $(document).ready(function () {
        getEqpInfo();
    });

    setInterval(function () {
        $("#canvas").remove();
        getEqpInfo();
    }, 120000);
</script>